import { type FunctionalComponent as FC } from 'vue';
import Table from '@/components/table/index.vue';
import type {
  SeriesDataItem,
  LesionDataList,
} from '@/store/modules/projectDetail/type';
import '../styles/stepForm.less';
interface Prop {
  sortAlertTableData: Function;
  delCompAlertData: Function;
  data: SeriesDataItem[];
  flag: boolean;
  handleSecondClick: Function;
  current?: LesionDataList;
}
const SeriesTable: FC<Prop, any> = (props, ctx) => {
  const ControlTypes = {
    text: '文本框',
    select: '下拉框',
    radiobox: '单选框',
    checkbox: '复选框',
    child_select: '二级下拉菜单',
  };
  const columns = [
    {
      title: '标注字段编码',
      dataIndex: 'code',
      // width: 120,
      // fixed: 'left',
      // slotName: 'index',
    },
    {
      title: '标注字段名称',
      dataIndex: 'name',
      slotName: 'name',
    },
    {
      title: '控件类型',
      dataIndex: 'type',
      slotName: 'type',
    },
    {
      title: '标签',
      dataIndex: 'tagList',
      // slotName: 'type',
    },
    {
      title: '是否必填',
      dataIndex: 'required',
      slotName: 'required',
    },
    {
      title: '操作',
      dataIndex: 'action',
      slotName: 'action',
    },
  ];
  const handleChange = ({ data, extra }) => {
    props.sortAlertTableData(data, props.flag, props.current?.lesionValue);
  };

  return (
    <Table
      columns={columns}
      data={props.data}
      bordered={true}
      pagination={false}
      showPagination={false}
      draggable={{ type: 'handle', width: 40 }}
      onChange={handleChange}
      row-key="id"
      v-slots={{
        name: ({ record, column, rowIndex }) => (
          <div>
            <a-link onClick={() => props.handleSecondClick(record)}>
              {record.name}
            </a-link>
          </div>
        ),
        type: ({ record, column, rowIndex }) => (
          <div>{ControlTypes[record.type]}</div>
        ),
        required: ({ record, column, rowIndex }) => (
          <a-switch v-model={record.required} />
        ),
        action: ({ record, column, rowIndex }) => (
          <a-link
            onClick={() =>
              props.delCompAlertData(
                record,
                props.flag,
                props.current?.lesionValue
              )
            }
          >
            删除
          </a-link>
        ),
      }}
    />
  );
};

export default SeriesTable;
